<script setup lang="ts">
import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    plan_name: "",
    plan_amount: 0,
    third_code: "",
    portion_amount: 0,
    is_notice: 0,
    plan_type: 0,
    cycle_type: 0,
    plain_start_time: "",
    end_plain_cycle: 0,
    plan_status: 0,
    category_id: 0,
    property_id: 0,
    family_id: 0
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="82px"
  >
    <el-row :gutter="30">
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="计划名称" prop="plan_name">
          <el-input
            v-model="newFormInline.plan_name"
            clearable
            placeholder="请输入计划名称"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="金额：" prop="plan_amount">
          <el-input
            v-model="newFormInline.plan_amount"
            placeholder="请输入金额："
            clearable
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="基金股票：" prop="third_code">
          <el-input
            v-model="newFormInline.third_code"
            placeholder="请输入基金/股票代码："
            clearable
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="持有份额：" prop="portion_amount">
          <el-input
            v-model="newFormInline.portion_amount"
            placeholder="请输入持有份额："
            clearable
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="是否通知：" prop="is_notice">
          <el-select
            v-model="newFormInline.is_notice"
            placeholder="请选择是否通知："
            clearable
          >
            <el-option label="是" value="1" />
            <el-option label="否" value="2" />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="计划类型：" prop="plan_type">
          <el-select
            v-model="newFormInline.plan_type"
            placeholder="请选择计划类型："
            clearable
          >
            <el-option label="支出" value="1" />
            <el-option label="收入" value="2" />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="轮询周期：" prop="cycle_type">
          <el-select
            v-model="newFormInline.cycle_type"
            placeholder="请选择轮询周期："
            clearable
          >
            <el-option label="月度" value="1" />
            <el-option label="年度" value="2" />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="开始时间：" prop="plain_start_time">
          <el-input
            v-model="newFormInline.plain_start_time"
            placeholder="请输入计划开始时间："
            clearable
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="结束周期：" prop="end_plain_cycle">
          <el-input
            v-model="newFormInline.end_plain_cycle"
            placeholder="请输入结束周期："
            clearable
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="计划状态：" prop="plan_status">
          <el-select
            v-model="newFormInline.plan_status"
            placeholder="请选择计划状态："
            clearable
          >
            <el-option label="计划" value="1" />
            <el-option label="进行" value="2" />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="分类名称：" prop="category_id">
          <el-select
            v-model="newFormInline.category_id"
            placeholder="请选择分类名称："
            clearable
          >
            <el-option label="支出" value="1" />
            <el-option label="收入" value="2" />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="资产名称：" prop="property_id">
          <el-select
            v-model="newFormInline.property_id"
            placeholder="请选择资产名称："
            clearable
          >
            <el-option label="支出" value="1" />
            <el-option label="收入" value="2" />
          </el-select>
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>
